﻿<MCard Width="500" Height="250" Class="overflow-auto" Style="margin: 0 auto" @ref="_card">
    <MList>
        @foreach (var item in _items)
        {
            <MListItem>
                <MListItemContent>
                    <MListItemTitle>@item</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MDivider />
        }
    </MList>
    <MInfiniteScroll HasMore="@_hasMore"
                     OnLoadMore="@LoadMore"
                     Parent="@_card.Ref">
        @if (context.HasMore && !context.Failed)
        {
            <MProgressLinear Indeterminate Color="primary"></MProgressLinear>
        }
        else if (context.Failed)
        {
            <span>Failed to load data</span>
            <span>
                <MIcon OnClick="@context.Retry">mdi-reload</MIcon>
            </span>
        }
        else
        {
            <span>That's all!</span>
        }
    </MInfiniteScroll>
</MCard>

@code {

    private MCard _card;
    private int _count;
    private List<string> _items = new();
    private bool _hasMore;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await LoadMore();
            StateHasChanged();
        }
    }

    private async Task LoadMore()
    {
        var append = await MockRequest();
        _items.AddRange(append);
        _hasMore = append.Count > 0;
    }

    private async Task<List<string>> MockRequest()
    {
        if (_count >= 3)
        {
            return new List<string>();
        }

        await Task.Delay(2000);

        _count++;

        return Enumerable.Range(_items.Count, 10).Select(n => n.ToString()).ToList();
    }

}
